<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../components/echarts-4.0.4.min.js"></script>
		<style>
			html,body{
				width: 100%;
				height: 100%;
				background:#0A0F23;
			}
			*{
				margin: 0;
				padding: 0;
			}
			.composite{position: absolute;top:15%;color:#fff;z-index:99;font-size: 22px;width: 200px;text-align: center;}
			.composite span{color:#ff0;display: block;font-size: 30px;line-height: 36px;}
		</style>
	</head>

	<body>
		<div class="composite" style="left:10%;">综合指数<span>38.4</span></div>
		<div class="composite" style="right:10%;">全国排名<span>4/333</span></div>
		<div id="main" style="width: 100%;height: 100%;"></div>
	</body>
	<script>
		var myChart = echarts.init(document.getElementById('main'));
		option = {
			backgroundColor: "#0A0F23",
			title: {
		        text: "西安科创指数",
		        top: "10%",
		        left: "center",
		        textStyle: {
		            color: "#FFF",
		            fontSize: 22
		        }
		    },
		    /*legend: {
		        data: ['经济', '人口','指数'],
		        left: 'right',
		        textStyle: {
					color: '#fff'
				}
		    },*/
		    radar: [{
		        indicator: [{
		            text: '人才指数'
		        }, {
		            text: '设备指数'
		        }, {
		            text: '技术指数'
		        }, {
		            text: '知识指数'
		        }, {
		            text: '政策指数'
		        }],
		        center: ['50%', '60%'],
		        radius: 230,
		        startAngle: 90,
		        splitNumber: 4,
		        shape: 'circle',
		        name: {
		            textStyle: {
		                color: '#ffffff',
		                fontSize: 16
		            }
		        },
		        splitArea: {
		            areaStyle: {
		                color: 'rgba(0, 0, 0, 0)'
		            }
		        },
		        axisLine: {
		            lineStyle: {
		                color: '#B8BCC0',
		                type: 'dotted',
		                opacity: 0.6
		            }
		        },
		        splitLine: {
		            lineStyle: {
		                color: 'rgba(64,183,255,1)'
		            }
		        }
		    }, ],
		    series: [{
		        name: '雷达图',
		        type: 'radar',
		        data: [{
		            value: [60, 55, 40, 60,40],
		            name: '图一',
		            symbol: 'rect',
		            symbolSize: 5,
		            lineStyle: {
		                normal: {
		                    color: '#00FFC6'
		                }
		            },
		            areaStyle: {
		                normal: {
		                    color: 'rgba(0,255,197,0.8)'
		                }
		            }
		        }]
		    }]
		};
		
		myChart.setOption(option);
	</script>

</html>